<template>
    <n-layout class="main-home">
        <n-layout-header class="header" bordered>
          <LayoutHead/>
        </n-layout-header>
        <n-layout position="absolute" class="layoutbox" has-sider>
            <n-layout-sider class="sider" width="200px" :native-scrollbar="false" bordered>
              <LayoutSider/>
            </n-layout-sider>
            <n-layout :native-scrollbar="false">
               <router-view/>
            </n-layout>
        </n-layout>
        <!-- <n-layout-footer position="absolute" style="height: 64px; padding: 24px" bordered>
            城府路
        </n-layout-footer> -->
    </n-layout>
</template>

<script setup>
// import { ref } from 'vue'
import { NLayout, NLayoutSider, NLayoutHeader, NLayoutFooter, NSpace } from 'naive-ui'
import LayoutHead from '@/components/LayoutHead.vue'
import LayoutSider from '@/components/LayoutSider.vue'

// import { getCookie } from '@/utils/index.js'
// import { getStorage } from '@/utils/storage.js'

// console.log(getCookie());
// console.log(getStorage());
// defineProps({
//     msg: String
// })

// const count = ref(0)
</script>
<style lang="less" scoped>
.main-home {
    height: 100vh;

    .header {
        height: 60px;
        background-color: hsla(0, 0%, 100%, .85);
        backdrop-filter: saturate(180%) blur(20px);
    }

    .layoutbox {
        top: 60px;
        // bottom: 64px;

    }

}
</style>